<template>
  <up-popup mode="center" :round="10" :show="showPopup" @close="handleHidePopup">
    <view class="popup">
      <view class="popup-header">分享二维码</view>
      <view class="popup-content flex  justify-between">
        <view class="">
          <u-image :src="detail?.qrcode" width="260rpx" height="260rpx" mode="widthFix"></u-image>
          <view class="text-center mt-[20rpx]">
            <view class="text-[24rpx] text-[#999]">长按识别二维码</view>
          </view>
        </view>
        <view class="flex-1 ml-[20rpx] overflow-hidden">
          <view class="title">活动ID：{{ activityInfo?.id }}</view>
          <view class="title mt-[10rpx]">{{ activityInfo?.title }}</view>
          <view class="link mt-[30rpx] text-[#999]">{{ detail?.url }}</view>
          <up-button class="mt-[20rpx]" size="small" type="primary" plain @click="handleCopy">复制链接</up-button>
        </view>
          
      </view>
    </view>
  </up-popup>
</template>
<script lang="ts" setup>
import { getAdminActivityShareApi } from '@/addon/htscrm/api';
import { ref } from 'vue'
import { copy } from '@/utils/common';

const showPopup = ref(false)
const detail = ref<IActivityQrcode>()
const activityInfo = ref<IActivityItem>()

const handleHidePopup = () => {
  showPopup.value = false
}

const handleShowPopup = (item: IActivityItem) => {
  showPopup.value = true
  activityInfo.value = item
  getQrcode(item.id)
}

async function getQrcode(id: IActivityItem['id']) {
  const res = await getAdminActivityShareApi(id)
  console.log(res)
  detail.value = res.data
}

/**
 * 复制
 */
function handleCopy() {
  copy(detail.value?.url, () => {
    uni.showToast({
      title: '复制成功'
    })
  })
}

defineExpose({
  handleShowPopup
})
</script>

<style lang="scss" scoped>
.popup {
  width: 600rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  .popup-header {
    text-align: center;
    font-weight: bold;
  }
  .popup-content {
    padding-top: 20rpx;

  }

  :deep(.u-image) {
    background: transparent !important;
  }

  :deep(uni-image > img) {
    user-select: all
  }

  .link {
    line-height: 34rpx;
    width: 100%;
    word-wrap: break-word;
    //两行省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .title {
    line-height: 34rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

  }
}
</style>